<template>
    <div class="row">
      <div class="left" :class="{removeLeft:isKaiOpen}">
        <div class="create-flashcards">
        <div class="header">
          <button class="back-btn">
            <span class="back-icon">←</span> Go back
          </button>
          <div class="header-right">
            <span class="last-saved">Last saved 1 day ago</span>
            <button class="create-btn">Create <span class="create-icon">✏️</span></button>
          </div>
        </div>
        <div class="create-options">
          <button
            class="option-btn active"
            @click="selectOption('notes')"
          >
            <div class="icon-wrapper">
              <img src="@/assets/note-icon.svg" alt="Notes" class="option-icon" />
            </div>
            Notes
          </button>
          <button
            class="option-btn active"
            @click="selectOption('pdf')"
          >
            <div class="icon-wrapper">
              <img src="@/assets/pdf-icon.svg" alt="PDF" class="option-icon" />
            </div>
            PDF
          </button>
          <button
            class="option-btn active"
            @click="selectOption('powerpoint')"
          >
            <div class="icon-wrapper">
              <img src="@/assets/ppt-icon.svg" alt="PowerPoint" class="option-icon" />
            </div>
            PowerPoint
          </button>
          <button
            class="option-btn no-bg "
            @click="selectOption('quizlet')"
          >
            <div class="icon-wrapper">
              <img src="@/assets/quizlet-icon.png" alt="Quizlet" class="option-icon" />
            </div>
            Quizlet
          </button>
        </div>
        <div class="form-section">
          <div class="form-group">
            <label for="title" class="form-label">Title</label>
            <input id="title" type="text" placeholder="Enter a title, like 'Chemistry - Chapter 22: Ions'" class="form-input" />
          </div>
          <div class="form-group">
            <label for="description" class="form-label">Description and Tags</label>
            <textarea id="description" placeholder="Add a description" class="form-textarea"></textarea>
            <button class="add-tags-btn">Add tags +</button>
          </div>
        
          <div class="footer">
            <div class="search-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" ><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>
              <input type="text" placeholder="Search terms/definitions" class="search-input" />
            </div>
            <div class="button-group">
              <button class="kai-complete-btn">Kai Complete</button>
              <button class="sharing-btn">Sharing</button>
            </div>
          </div>
   
        </div>
                
      </div>
      <div class="create-flashcards">
    <Flashcard v-for="n in 4" :key="n" :number="n"   @click="toggleKai"/>
  </div>
  </div>
  <div v-if="isKaiOpen" class="kai-content right">
    <div class="kai-header">
      <img src="https://s3.amazonaws.com/knowt.com/images/ai-summarizer-kai.svg" alt="Kai" class="kai-icon" />
      <h2>Kai</h2>
    </div>
    <ul class="kai-options">
      <li>Create 1 flashcard on... (insert topic)</li>
      <li>Create 1 fill in the blank flashcard on... (insert topic)</li>
      <li>Create 1 Q & A flashcard on... (insert topic)</li>
      <li><button @click="toggleKai">Cancel selection</button></li>
    </ul>
    <div class="kai-footer">
      <p>Flashcard 2 selected</p>
      <input type="text" placeholder="Tell Kai how to make your flashcards better" />
    </div>
  </div>

    </div>

     
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { ElButton, ElInput } from 'element-plus'
import Flashcard from '@/components/Flashcard.vue'

  const selectedOption = ref('notes')
  
  const selectOption = (option: string) => {
    selectedOption.value = option
  }

  const isKaiOpen = ref(false);

  const toggleKai = () => {
    console.log('11')
    isKaiOpen.value = !isKaiOpen.value;
  };
  </script>
  
  <style scoped>
  .row{
    display: flex;
  }
  .left{
    width: 1200px;
    margin-left: 60px;
  }
  .removeLeft{
    width: 720px!important;
  }
  .right{
    width: 680px
  }
  .create-flashcards {
    padding: 24px;
    color: white;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  
  .back-btn {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .back-icon {
    background-color: #00bfa5;
    color: black;
    border-radius: 50%;
    padding: 5px;
    margin-right: 8px;
  }
  
  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .last-saved {
    color: #aaa;
  }
  
  .create-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .create-icon {
    margin-left: 8px;
  }
  
  .create-options {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
  }
  
  .option-btn {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    color: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 16px 24px;
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
    flex: 1;
  }
  
  .option-btn.active {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
  }
  
  .no-bg {
    background: #282929;
  }
  
  .icon-wrapper {
    background-color: white;
    border-radius: 8px;
    padding: 8px;
    margin-right: 8px;
  }
  
  .option-icon {
    width: 35px;
  }
  
  .form-section {
 
  }
  
  .form-group {
    border-radius: 8px;
    background-color: var(--color-neutral-white);
    padding: .6rem 1.4rem;
    margin-bottom: 16px;
    background-color: #2a2a2a;

  }
  
  .form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
  }
  
  .form-input,
  .form-textarea {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    background-color: #1a1a1a;
    color: #fff;
  }
  
  .form-textarea {
    height: 100px;
    resize: none;
  }
  
  .add-tags-btn {
    margin-top: 8px;
    background-color: #444;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .search-section {
    margin-top: 16px;
  }
  
  .search-wrapper {
    padding: 2px 10px;
    display: flex;
    align-items: center;
    background-color: #333;
    border-radius: 20px;
    border: 1px solid #555;
  }
  
  .search-icon {
    margin-right: 8px;
    color: #aaa;
  }
  
  .search-input {
    width: 100%;
    border: none;
    background-color: transparent;
    color: #fff;
  }
  
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
  }
  
  .button-group {
    display: flex;
    gap: 10px;
  }
  
  .kai-complete-btn,
  .sharing-btn {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
  }
  
  .kai-complete-btn:hover,
  .sharing-btn:hover {
    background-color: #444;
  }

  .kai-content {
    position: fixed;
    left: 820px;
    top: 120px;
    height: 100%;
    background-color: #2a2a2a;
    color: white;
    padding: 20px;
    transition: width 0.3s ease;
    gap: 9.4rem;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .kai-header {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .kai-icon {
    width: 40px;
    height: 40px;
  }

  .kai-options {
    list-style: none;
    padding: 0;
  }

  .kai-options li {
    margin: 10px 0;
    padding: 10px;
    background-color: #333;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .kai-options li:hover {
    background-color: #444;
  }

  .kai-footer {
    margin-top: 20px;
  }

  .kai-footer p {
    margin-bottom: 10px;
  }

  .kai-footer input {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #1a1a1a;
    color: white;
  }
  </style>